<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript" src="/core/file.js"></script>
    <link rel="stylesheet" href="/css/admin.css">
</head>
<body>
<div id="app">
    <div class="left" v-show="menuState">
        <div class="left_head">
            <span>良井后台管理系统1.0</span>
        </div>
        <div class="left_main">
            <el-menu class="el-menu-vertical-demo"
                     :default-active="thisMenu"
                     :active="thisMenu"
                     @select="menuClick"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b">
                <tree_menu :data="menuTree"></tree_menu>
            </el-menu>

        </div>
    </div>
    <div class="right">
        <div class="right_head">
            <!--头部内容-->
            <div style="flex: 1">
                <i class="el-icon-caret-left" style="font-size: 45px;color: white" v-if="menuState" title="隐藏菜单"
                   @click="unfold(false)"></i>
                <i class="el-icon-caret-right" style="font-size: 45px;color: white" v-else circle title="显示菜单"
                   @click="unfold(true)"></i>
            </div>
            <ul class="layui-nav" style="background: #334157">
                <li class="layui-nav-item">
                    <el-avatar size="small" src="/img/default.jpg"></el-avatar>
                </li>
                <li class="layui-nav-item" style="margin-left: 10px;">
                    <el-dropdown @command="handleCommand">
                      <span class="el-dropdown-link" style="color: white">
                             {{userInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </li>
            </ul>

        </div>
        <div class="right_main">
            <!--页面主体-->
            <el-tabs v-model="thisMenu" type="card" @tab-remove="removeTab">
                <el-tab-pane
                        v-for="(item, index) in openMenu"
                        :closable="item.id=='-1'?false:true"
                        :key="item.id"
                        :label="item.name"
                        :name="item.id">
                    <div style="width: 100%;height: 100%" id="iframeBox" v-if="thisMenu==item.id">
                        <iframe id="myiframe" :src="openUrl" width="100%" frameborder="0" scrolling="no"></iframe>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            menuState: true,
            //打开的路径
            openUrl: HOME_PAGE.path,
            //用户信息
            userInfo: getSession("userInfo"),
            //菜单集合
            menuTree: getSession("userInfo") == null ? [] : getSession("userInfo").sysMenus,
            //菜单树参数对应配置
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            //当前打开的节点
            thisMenu: "-1",
            //打开过的菜单
            openMenu: [
                HOME_PAGE,
            ],
        },
        components: {
            'tree_menu': httpVueLoader('/component/tree_menu.vue'),
        },
        watch: {
            //监听菜单切换
            thisMenu: function (val) {
                this.openUrl = this.openMenu.filter(x => x.id == val)[0].path;
            }
        },
        created() {
            this.changeFrameHeight();
            if (this.userInfo == null) {
                this.getLoginUser();
            }
        },
        methods: {
            menuClick(key) {
                this.thisMenu = key;
                //判断当前节点是否已经加入openMenu;
                if (this.openMenu.filter(x => x.id == key).length == 0) {
                    this.openMenu.push(this.traverseTreeMenu(this.menuTree,key));
                }
            },

            //遍历找到菜单树找到当前指定菜单
            traverseTreeMenu(list,id){
                let row;
                list.map(item=>{
                    if(item.children!=null && item.children.length!=0){
                       row=this.traverseTreeMenu(item.children,id)
                    }
                    if(id==item.id){
                        row=item;
                    }
                })
                return row;
            },

            //下拉菜单触发时间
            handleCommand(command) {
                switch (command) {
                    case 'userInfo':
                        break
                    case 'logout':
                        window.location.href = "/logout"
                        break
                }
            },
            //菜单隐藏显示
            unfold(val) {
                this.menuState = val;
            },

            //获取登录的用户
            async getLoginUser() {
                this.userInfo = getLoginUser();
                this.menuTree = getSession("userInfo").sysMenus;
            },


            //设置iframe高度
            changeFrameHeight() {
                var ifm = document.getElementById("myiframe");
                ifm.height = document.getElementById("iframeBox").offsetHeight - 100;
            },



            /**
             * 删除一个tab
             * @param targetName
             */
            removeTab(delKey) {
                //找到需要删除的节点
                let delIndex = 0;
                this.openMenu.map((x, i) => {
                    if (x.id == delKey) {
                        this.openMenu.splice(i, 1);
                        delIndex = i;
                    }
                })
                //判断删除的id是否等于当前选择的id
                if (delKey == this.thisMenu) {
                    if (delIndex >= this.openMenu.length) {
                        this.thisMenu = this.openMenu[this.openMenu.length - 1].id;
                    } else {
                        this.thisMenu = this.openMenu[delIndex].id;
                    }
                }
            },

        }
    })

</script>
</html>